<template>
	<div class="warpperss">
		<div class="icon-item" 
		v-for="item of catalogList"
		:key="item.id"
		>
			<img :src="item.imgUrl" class="img-1" :class="item.color">
			<p>{{item.desc}}</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'homeCatalog',
		data(){
			return {
				green: "green",
				orgion: "orgion",
				blue: "blue",
				pick: "pick",
				catalogList:[
					{
						imgUrl: "https://pic5.40017.cn/01/000/84/4f/rBLkBVmLtaiAcmRaAAAEH9JbM6g234.png",
						id: "2343",
						desc:"本地热推",
						color:"green"
					},
					{
						imgUrl: "https://pic5.40017.cn/02/001/6d/e2/rBLkCFmEG8eALBI8AAAEA1xXmqI793.png",
						id: "23433",
						desc:"亲子游",
						color:"orgion"
					},
					{
						imgUrl: "https://pic5.40017.cn/02/001/6d/db/rBLkCVmEGfeAVI4FAAAEXdabEDE534.png",
						id: "234333",
						desc:"温泉预售",
						color:"blue"
					},
					{
						imgUrl: "https://pic5.40017.cn/02/001/6d/e2/rBLkCFmEG8eALBI8AAAEA1xXmqI793.png",
						id: "23436",
						desc:"自然风光",
						color:"pick"
					}
				]
			}
		}
	}
</script>

<style>
	.warpperss{
		width: 100%;
		text-align: center;
		margin-top: .32rem;
	}
	.icon-item{
		width: 25%;
		float: left;
	}
	.img-1{
		width: 40%;
		border-radius: .5rem;
		margin-bottom: .17rem;
	}.img-2{
		width: 40%;
		border-radius: .5rem;
		margin-bottom: .17rem
	}.img-3{
		width: 40%;
		border-radius: .5rem;
		margin-bottom: .17rem
	}.img-4{
		width: 40%;
		border-radius: .5rem;
		margin-bottom: .17rem
	}
	.green {
		background: #6dcf16;
	}
	.orgion {
		background: #c8c217;
	}
	.blue {
		background: #41a9f2;
	}
	.pick {
		background: #ff557f;
	}
	.icon-item{
		padding-bottom: .3rem;
		border-bottom: .16rem solid #EEEEEE;
	}
</style>
